<template>
  <div class="ziyuan">
    <el-table
      :data="tableData"
      header-align="center"
      class="customer-table"
      height="table"
      empty-text="暂无数据"
    >
      <el-table-column align="center" prop="name" label="资源">
      </el-table-column>
      <el-table-column
        align="center"
        prop="footprint"
        label="占地面积(平方千米)"
      >
      </el-table-column>
      <el-table-column align="center" prop="position" label="坐标">
      </el-table-column>
      <el-table-column align="center" prop="explanation" label="详情">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <div @click="chakantanchucheng(scope.row)" class="caozuoshoubiao">
            查看照片
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 点击查看的弹出层 -->
    <el-dialog title="提示" :visible.sync="chakanzhanshi" width="50%" center>
      <div>
        <img class="ziyuanImg"
          v-for="(item, index) in images"
          :src="item"
          :key="index"
          id="contract_url"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="chakanzhanshi = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["biaogeqingqiucanshu", "fenyexinxi"],
  data() {
    return {
      tableData: [],
      // 点击查看应有的数据
      chakanzhanshi: false,
      images: [],
    };
  },
  methods: {
    //刷新表格
    gengxin() {
      this.huoqushuju();
    },
    //数据获取
    huoqushuju() {
      if (this.biaogeqingqiucanshu.leibie != "该村未设置类别") {
        let params = new URLSearchParams();
        params.append("page", this.fenyexinxi.currentPage);
        params.append("size", this.fenyexinxi.pagesize);
        params.append("townId", this.biaogeqingqiucanshu.selectzhen);
        params.append("typeId", this.biaogeqingqiucanshu.leibie);
        params.append("villageId", this.biaogeqingqiucanshu.selectcun);
        this.$axios
          .post("/Leader/Funds/resourceebacktabl", params)
          .then((response) => {
            this.tableData = response.data.data.data.records;
            // 设置数据total
            this.$emit("setfenyetotal", response.data.data.data.total);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.tableData = [];
      }
    },
    // 表格操作中的弹出层展示
    chakantanchucheng(row) {
      console.log(row);
      let image = JSON.parse(row.image);
      image.forEach((item, index) => {
        this.images[index] = item.url;
      });
      this.chakanzhanshi = true;
    },
  },
};
</script>

<style lang="less" scoped>
.ziyuan {
  height: 100%;
}
.biaogejiatankuang {
  height: 100%;
}
.el-table {
  height: 100%;
}
.ziyuanImg{
  width: 45%;
  margin: 1px 25%;
}
</style>